<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*所有选择器*/
        *{
            /*去除内外边距*/
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
        }
        section{
            width: 100%;
            height: 100%;
            /*背景颜色*/
            background: azure;
            /*超出区域隐藏*/
            overflow: hidden;
            position: relative;
            animation: bg 25s linear infinite;

        }
        @keyframes bg {
            0%{
                /*背景颜色*/
                background: #0075d5;
            }
            20%{
                /*背景颜色*/
                background:red;

            }
            50%{
                /*背景颜色*/
                background: green;

            }
            70%{
                /*背景颜色*/

                background: red;


                background: blue;

                background: red;

            }
            100%{
                /*背景颜色*/
                background: #0075d5;
            }

        }

        section div{
            width: 300%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        section div:nth-child(1){
            background: url("image/cloud_one.png");
            animation: play 50s linear infinite;
        }section div:nth-child(2){
            background: url("image/cloud_two.png");
            animation: play 20s linear infinite;
        }section div:nth-child(3){
            background: url("image/cloud_three.png");
            animation: play 5s linear infinite;
        }

         @keyframes play {
             0%{
                 left: 0;
             }
             100%{
                 left: -200%;
             }
         }

    </style>
</head>
<body>
<!--    内容主体部分    -->
<section>
    <div></div>
    <div></div>
    <div></div>
</section>


</body>
</html>